<template>
	<view>
		<view class="tou">
			<view class="status_bar">
			    <!-- 这里是状态栏 -->
			   </view>
			<view class="top">
				<image src="../../static/shu/jt1.png" mode="" class="jt" v-model="syy" @click="fanhui(syy)"></image>
				<view class="zi">购物车</view>
			</view>
		</view>
		<view class="maincontent">
			<view class="__bdi">
				<view class="tj-item" v-for="(item,index) in tjList" :key="item.skuId"  @click="toDetail(item.id)">
					<image :src="item.picUrl[item.number]" mode="" class="tu" @click="qiehuan(item)"></image>
					<image :src="item.piclist[item.indNum]" mode="" class="xuanze" @click="xuanze(item)"></image>
					<image class="trash" src="../../static/shu/trashcan.png" mode="" @click="remove(item)"></image>
					<text class="_s">{{item.name}}</text>
					<text class="_p">￥{{item.price}}</text>
				</view>
			</view>
			<view class="empty">
				
			</view>
		</view>
		<view class="botm">
			<view class="allprice" v-model="allprice">￥{{this.allprice}}</view>
			<view class="bd">
				<u-popup class="tanchu" v-model="show" mode="bottom" border-radius="20" width="100%" height="50%">
					<view class="name">请输入你的电话号码</view>
					<input type="number" value="" />
					<view class="name">请输入你的地址</view>
					<input type="text" value="" />
					<button type="default">支付</button>
				</u-popup>
				<u-button class="submit" @click="show=true">提交</u-button>
			</view>
		</view>
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				show: false,
				syy:{
					url:"../../pages/my/my"
				},
				allprice:0.00,
				tjList:[
				],
				skuIds:[],
				goosId:"",
			}
		},
		created() {
			this.getData();
			
		},
		methods: {
			getData(){
				const requrl = getApp().globalData.login+"/cart/list";
				console.log("aaa");
				console.log(getApp().globalData.User.uId)
				this.$axios({
					url:requrl,
					method:'GET',
					params:{
						uId:getApp().globalData.User.uId,
					},
					}).then(({data})=>{
						if(data.code==0){
							this.tjList=data.data.cart;
							console.log("成功");
							this.tjList.map((item)=>{
								var piclist =["../../static/shu/xuanze1.png","../../static/shu/xuanze2.png"];
								item.piclist = piclist;
								item.indNum = 0;
							})
							console.log(this.tjList);
						}else{
							alert(data.msg);
						}
					});	
					
			},
			// open() {
			//           console.log('open');
			//         },
			// close() {
			//   this.show = false;
			//   console.log('close');
			// },
			submit(){
				const requrl = getApp().globalData.login+"/order/submit";
				this.$axios({
					url:requrl,
					method:'GET',
					params:{
						uId:getApp().globalData.User.uId,
						skuId:this.skuIds,
						address:getApp().globalData.address,
						phone:getApp().globalData.phone,
					},
					}).then(({data})=>{
						if(data.code==0){
							Alert("您已提交成功");
						}else{
							alert(data.msg);
						}
					});	
					
			},
			fanhui(e){
				uni.switchTab({
					url: e.url
				})
			},
		     toDetail(id){
				uni.navigateTo({
					//李佳蓉学姐做的
				})
			},
			xuanze(e){
				let pic =e.piclist[0];
				e.piclist[0]=e.piclist[1];
				e.piclist[1]=pic;
				if(e.piclist[0]=="../../static/shu/xuanze2.png"){
					this.skuIds.push(e.skuId);
					this.allprice +=Number(e.price.toFixed(2));
				}else{
					this.skuIds=this.skuIds.map((item)=>{//流式计算，要把stream流里面的赴给内存，这样效率比for循环高，map，filter都是
						if(item==e.skuId){
							item=0;
						}
						return item;
					})
					this.skuIds=this.skuIds.filter(function(item){
						return item!=0
					});
					this.allprice -=Number(e.price.toFixed(2));
				}
				this.$forceUpdate();
			},
			qiehuan(e){
				if(e.number<e.picUrl.length-1){
					e.number++;
				}else{
					e.number=0;
				}
			},
			// sku私有属性spu公共属性
			remove(e){
				const requrl = getApp().globalData.login+"/cart/delete";
				this.$axios({
					url:requrl,
					method:'GET',
					params:{
						uId:getApp().globalData.User.uId,
						skuId:getApp().globalData.User.skuId,
					},
					}).then(({data})=>{
					});	
					this.getData();
			}
		}
	}
	
</script>

<style lang="scss">
	.status_bar {
	  height: var(--status-bar-height);
	  width: 100%;
	  
	 }
	 .tou{
	 	position: fixed;
	 	height: 100upx;
	 	width: 100%;
	 	z-index: 5;
	 	top: 0;
	 	left: 0;
	 	background-color: #50d8be;
	 	box-sizing: border-box;
	.top{
		width: 100%;
		height: 90upx;
		background-color: #50d8be;
		position: relative;
		display: flex;//弹性布局
		align-items: center;
		justify-content: center;
		.jt{
			position: absolute;
			width: 45upx;
			height: 45upx;
			left: 50upx;
			font-size: 45upx;
			
		}
		.zi{
			position: absolute;
			color: #393939;
			font-size: 45upx;
			border-bottom: 6upx #FFFFFF solid;
			font-weight: bold;
		}
	}
	
}
.maincontent{
	width: 100%;
	.__bdi{
		margin-top: 200upx;
		display: flex;
		flex-wrap: wrap;
		
		.tj-item{
			position: relative;
			width: 40%;
			padding:10upx;
			margin-left: 50upx;
			margin-bottom: 30upx;
			height: 500upx;
			background:linear-gradient(#ffffff,#aaf7ff,#FFFFFF);
			border: 6upx #42c7e4 solid;
			.tu{
				width: 100%;
				height: 300upx;
			}
			._s{
				display: flex;
				margin: 10upx;
				font-weight: bold;
			}
			._p{
				display: flex;
				color: #bf0303;
				margin: 10upx;
			}
			.xuanze{
				margin-left: 225upx;
				width: 40upx;
				height: 40upx;
				right: 10upx;
				margin-top: 10upx;
			}
			image{
				width: 40upx;
				height: 40upx;
			}
			.trash{
				position: absolute;
				right: 10upx;
				width: 55upx;
				height: 55upx;
				bottom: 20upx;
			}
		}
			
	}
	.empty{
		width: 100%;
		height: 100rpx;
	}
	}

	.botm{
		position: fixed;//相对窗口固定定位
		width: 100%;
		height: 100upx;
		background-color: #50d8be;
		border-radius: 30upx 30upx 0 0;
		bottom: 0;
		display: flex;
		.allprice{
			width: 230upx;
			margin-left: 20upx;
			height: 80upx;
			font-size: 40upx;
			background:linear-gradient(#ffffff,#fffaab,#FFFFFF);
			border: 6upx #d2e42b solid;
			border-radius: 40upx;
			margin-left: 230upx;
			line-height: 70upx;
			text-align: center;
			margin-top: 10upx;
		}
		.submit{
			width: 230upx;
			height: 80upx;
			font-size: 40upx;
			margin-left: 20upx;
			background:linear-gradient(#ffffff,#aaf7ff,#FFFFFF);
			border: 6upx #2B85E4 solid;
			border-radius: 40upx;
			line-height: 70upx;
			text-align: center;
			margin-top: 10upx;
		}
		
	}
	.tanchu{//弹出样式
		.name{
			margin: 30upx 0;
			width: 100%;
			text-align: center;
			color: #50d8be;
			font-size: 40upx;
			font-weight: bold;
		}
		input{
			width: 70%;
			height: 80upx;
			margin: 0 auto;//中间
			font-size: 40upx;
			border-radius: 40upx;
			border: 6upx solid #ffffcb;
			background:linear-gradient(#65b7ff,#ffffff);
			padding-left: 30upx;
		}
		button{
			width: 50%;
			height: 100upx;
			margin: 0 auto;//中间
			font-size: 40upx;
			border-radius: 40upx;
			border: 6upx solid #ffffcb;
			background:linear-gradient(#65b7ff,#ffffff);
			padding-left: 30upx;
		}
	}
</style>
